


Quick Tutorial - Adding and Resizing Images for Cellphone Scrolling

by LostInQueue



Category: Star Wars - All Media Types
Genre: Image resizing tutorial, getting images to work with phone, help with images, images in Ao3, tutorial
Language: English
Status: Completed
Published: 2019-11-20
Updated: 2019-11-20
Packaged: 2021-04-03 17:40:58
Rating: General Audiences
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 1
Words: 366
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/21496240
Author URL: https://archiveofourown.org/users/LostInQueue/pseuds/LostInQueue
Summary: After starting an image heavy story called Ben's Dilemma, and another one called A Baker's Dozen, I realized that there was an interest in learning this. The tutorial here shows edited screenshots to help navigate adding your link and how to resize the image(s) so that they come up properly on a cell phone or mobile device. :)
Comments: 1
Kudos: 2





	Quick Tutorial - Adding and Resizing Images for Cellphone Scrolling

Alright, lets get right to it!

I use imgbb.com to host my pictures. If you look closely, I changed some of the text in the user section and the link so that the item that was uploaded didnt find its way all over the internet after I posted this but your link will look similar and have the right code thanks to the upload service.

Below is a screenshot of what I mean:

[ ](https://ibb.co/QvQ3s6Y)

From there, highlight the code, copy and open your Ao3 work section (regardless of whether you're posting new work or editing). Find the Work Text section and paste the code in as it shows below.

[ ](https://ibb.co/YLfRKRQ)

Once the code is in there, switch from the default HTML layout to Rich Text so that your window turns white and your image shows as an image instead of the code.

[ ](https://ibb.co/BN6RsW7)

If you click on that image, it will give you a "highlighted" box around the image as it shows below with points at every corner. The note in blue explains what to do, but I will just make sure it's here too. If you click and drag it in there will be a small dark grey/ black box that comes up with numbers depicting the change in size as you move it in or out. To make it cell phone compliant, which means that your image won't exceed the phone's screen, you will need to make sure that the first number, which is the width, is somewhere between 360 - 365.

[ ](https://ibb.co/m6JDYgk)

Below is an example of the change to the image from what it was when it started. After it's resized you should be good to go!

[](https://ibb.co/6gm4qtW)  
  
Example of Sample:

[ ](https://ibb.co/M1dPLTJ)

Also, a great note to go by is that if you have trouble switching from HTML to Rich Text with your document, you can always go back into your work place (wherever you wrote your story) and copy and paste what messed up in here between your images and it won't screw with your them now that they've been set up in the Rich Text and adjusted.

Just REMEMBER not to select all - or you'll have to start over and readjust your images all over again.


End file.
